<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>仓库信息 - 雁农冷链平台</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- 所需样式 -->
	<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.warehouse-container {
			padding: 20px;
		}
		.warehouse-card {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
			padding: 20px;
		}
		.warehouse-item {
			border: 1px solid #e4e7ed;
			border-radius: 6px;
			padding: 20px;
			margin-bottom: 15px;
			transition: all 0.3s;
			position: relative;
		}
		.warehouse-item:hover {
			border-color: #409eff;
			box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
		}
		.temp-normal {
			color: #67c23a;
			font-weight: bold;
		}
		.temp-warning {
			color: #e6a23c;
			font-weight: bold;
		}
		.temp-danger {
			color: #f56c6c;
			font-weight: bold;
		}
		.status-active {
			color: #67c23a;
			font-weight: bold;
		}
		.status-maintenance {
			color: #e6a23c;
			font-weight: bold;
		}
		.status-offline {
			color: #f56c6c;
			font-weight: bold;
		}
		.temp-chart {
			height: 200px;
			background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 16px;
		}
		.inventory-progress {
			margin: 10px 0;
		}
		.warehouse-status {
			position: absolute;
			top: 15px;
			right: 15px;
		}
		.alert-panel {
			background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
			color: white;
			padding: 15px;
			border-radius: 8px;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="warehouse-container">
			<h2 style="margin-bottom: 30px; color: #303133;">
				<i class="el-icon-house"></i> 仓库信息管理
			</h2>
			
			<!-- 告警面板 -->
			<div class="alert-panel" v-if="alerts.length > 0">
				<div style="display: flex; align-items: center; margin-bottom: 10px;">
					<i class="el-icon-warning" style="font-size: 20px; margin-right: 10px;"></i>
					<strong>系统告警 ({{alerts.length}}条)</strong>
				</div>
				<div v-for="alert in alerts" :key="alert.id" style="margin-bottom: 5px; font-size: 14px;">
					• {{alert.message}}
				</div>
			</div>
			
			<!-- 仓库概览 -->
			<div class="warehouse-card">
				<h3 style="margin-bottom: 20px; color: #409eff;">
					<i class="el-icon-data-analysis"></i> 仓库概览
				</h3>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-card class="box-card">
							<div style="text-align: center;">
								<div style="font-size: 32px; color: #409eff; font-weight: bold;">{{overview.totalWarehouses}}</div>
								<div style="color: #909399;">仓库总数</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card class="box-card">
							<div style="text-align: center;">
								<div style="font-size: 32px; color: #67c23a; font-weight: bold;">{{overview.activeWarehouses}}</div>
								<div style="color: #909399;">运行中</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card class="box-card">
							<div style="text-align: center;">
								<div style="font-size: 32px; color: #e6a23c; font-weight: bold;">{{overview.totalCapacity}}</div>
								<div style="color: #909399;">总容量(m³)</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card class="box-card">
							<div style="text-align: center;">
								<div style="font-size: 32px; color: #f56c6c; font-weight: bold;">{{overview.utilizationRate}}%</div>
								<div style="color: #909399;">利用率</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
			
			<!-- 仓库列表 -->
			<div class="warehouse-card">
				<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
					<h3 style="margin: 0; color: #409eff;">
						<i class="el-icon-office-building"></i> 仓库列表
					</h3>
					<el-button type="primary" size="small" @click="showWarehouseDialog = true">
						<i class="el-icon-plus"></i> 添加仓库
					</el-button>
				</div>
				
				<el-row :gutter="20">
					<el-col :span="12" v-for="warehouse in warehouses" :key="warehouse.id">
						<div class="warehouse-item">
							<div class="warehouse-status">
								<el-tag :type="getStatusType(warehouse.status)">{{warehouse.statusText}}</el-tag>
							</div>
							
							<h4 style="margin-bottom: 15px; color: #303133;">{{warehouse.name}}</h4>
							
							<div style="margin-bottom: 10px;">
								<span style="color: #909399;">地址：</span>{{warehouse.address}}
							</div>
							
							<div style="margin-bottom: 10px;">
								<span style="color: #909399;">类型：</span>{{warehouse.type}}
								<span style="color: #909399; margin-left: 20px;">容量：</span>{{warehouse.capacity}}m³
							</div>
							
							<div style="margin-bottom: 15px;">
								<span style="color: #909399;">当前温度：</span>
								<span :class="getTempClass(warehouse.currentTemp, warehouse.targetTemp)">{{warehouse.currentTemp}}°C</span>
								<span style="color: #909399; margin-left: 10px;">(目标: {{warehouse.targetTemp}}°C)</span>
							</div>
							
							<div style="margin-bottom: 15px;">
								<span style="color: #909399;">库存使用率：</span>
								<div class="inventory-progress">
									<el-progress :percentage="warehouse.usageRate" :color="getProgressColor(warehouse.usageRate)"></el-progress>
								</div>
							</div>
							
							<div style="margin-bottom: 15px;">
								<span style="color: #909399;">负责人：</span>{{warehouse.manager}}
								<span style="color: #909399; margin-left: 20px;">联系电话：</span>{{warehouse.phone}}
							</div>
							
							<div>
								<el-button size="mini" @click="viewWarehouseDetail(warehouse)">详情</el-button>
								<el-button size="mini" type="primary" @click="monitorTemperature(warehouse)">温度监控</el-button>
								<el-button size="mini" type="success" @click="manageInventory(warehouse)">库存管理</el-button>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 温度监控 -->
			<div class="warehouse-card">
				<h3 style="margin-bottom: 20px; color: #409eff;">
					<i class="el-icon-thermometer"></i> 实时温度监控
				</h3>
				<el-row :gutter="20">
					<el-col :span="16">
						<div class="temp-chart">
							<div>
								<i class="el-icon-data-line" style="font-size: 48px; margin-bottom: 10px;"></i>
								<div>温度变化趋势图</div>
								<div style="font-size: 14px; margin-top: 10px; opacity: 0.8;">实时监控 · 历史数据 · 异常预警</div>
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div style="margin-bottom: 20px;">
							<h4>温度告警记录</h4>
							<el-timeline>
								<el-timeline-item timestamp="14:30" color="#f56c6c">
									1号冷库温度异常：-15°C (目标-18°C)
								</el-timeline-item>
								<el-timeline-item timestamp="12:15" color="#e6a23c">
									3号冷库湿度偏高：85% (标准<80%)
								</el-timeline-item>
								<el-timeline-item timestamp="09:45" color="#67c23a">
									2号冷库温度恢复正常
								</el-timeline-item>
							</el-timeline>
						</div>
						<div style="background: #f0f9ff; padding: 15px; border-radius: 8px; border-left: 4px solid #409eff;">
							<div style="font-weight: bold; color: #409eff; margin-bottom: 10px;">
								<i class="el-icon-bell"></i> 监控提醒
							</div>
							<div style="font-size: 14px; color: #606266;">系统24小时实时监控所有仓库温湿度，异常时自动发送告警通知</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 库存统计 -->
			<div class="warehouse-card">
				<h3 style="margin-bottom: 20px; color: #409eff;">
					<i class="el-icon-goods"></i> 库存统计
				</h3>
				<el-table :data="inventoryData" style="width: 100%">
					<el-table-column prop="warehouseName" label="仓库名称" width="150"></el-table-column>
					<el-table-column prop="goodsType" label="货物类型" width="120"></el-table-column>
					<el-table-column prop="quantity" label="数量" width="100"></el-table-column>
					<el-table-column prop="unit" label="单位" width="80"></el-table-column>
					<el-table-column prop="storageDate" label="入库日期" width="120"></el-table-column>
					<el-table-column prop="expiryDate" label="保质期至" width="120"></el-table-column>
					<el-table-column prop="status" label="状态" width="100">
						<template slot-scope="scope">
							<el-tag :type="getInventoryStatusType(scope.row.status)">{{scope.row.status}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<el-button size="mini" @click="viewInventoryDetail(scope.row)">详情</el-button>
							<el-button size="mini" type="warning" @click="adjustInventory(scope.row)">调整</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		
		<!-- 添加仓库对话框 -->
		<el-dialog title="添加仓库" :visible.sync="showWarehouseDialog" width="600px">
			<el-form :model="warehouseForm" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="仓库名称">
							<el-input v-model="warehouseForm.name" placeholder="请输入仓库名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="仓库类型">
							<el-select v-model="warehouseForm.type" placeholder="请选择仓库类型">
								<el-option label="冷冻库" value="frozen"></el-option>
								<el-option label="冷藏库" value="refrigerated"></el-option>
								<el-option label="保鲜库" value="fresh"></el-option>
								<el-option label="常温库" value="normal"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="仓库地址">
					<el-input v-model="warehouseForm.address" placeholder="请输入详细地址"></el-input>
				</el-form-item>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="容量(m³)">
							<el-input-number v-model="warehouseForm.capacity" :min="0"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="目标温度(°C)">
							<el-input-number v-model="warehouseForm.targetTemp" :min="-30" :max="30"></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="负责人">
							<el-input v-model="warehouseForm.manager" placeholder="请输入负责人姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话">
							<el-input v-model="warehouseForm.phone" placeholder="请输入联系电话"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showWarehouseDialog = false">取消</el-button>
				<el-button type="primary" @click="saveWarehouse">保存</el-button>
			</div>
		</el-dialog>
	</div>
	
	<!-- 所需js -->
	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/kj/element-ui/index.js"></script>
	<script src="../../static/sa.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				overview: {
					totalWarehouses: 8,
					activeWarehouses: 6,
					totalCapacity: 12500,
					utilizationRate: 78
				},
				alerts: [
					{id: 1, message: '1号冷库温度异常，当前-15°C，目标-18°C'},
					{id: 2, message: '3号冷库湿度偏高，当前85%，标准<80%'}
				],
				warehouses: [
					{
						id: 1,
						name: '1号冷冻库',
						address: '北京市朝阳区物流园区A区',
						type: '冷冻库',
						capacity: 2000,
						currentTemp: -15,
						targetTemp: -18,
						usageRate: 85,
						manager: '张经理',
						phone: '13800138001',
						status: 'active',
						statusText: '运行中'
					},
					{
						id: 2,
						name: '2号冷藏库',
						address: '北京市朝阳区物流园区B区',
						type: '冷藏库',
						capacity: 1500,
						currentTemp: 2,
						targetTemp: 2,
						usageRate: 72,
						manager: '李经理',
						phone: '13800138002',
						status: 'active',
						statusText: '运行中'
					},
					{
						id: 3,
						name: '3号保鲜库',
						address: '北京市朝阳区物流园区C区',
						type: '保鲜库',
						capacity: 1200,
						currentTemp: 8,
						targetTemp: 8,
						usageRate: 65,
						manager: '王经理',
						phone: '13800138003',
						status: 'maintenance',
						statusText: '维护中'
					},
					{
						id: 4,
						name: '4号常温库',
						address: '北京市朝阳区物流园区D区',
						type: '常温库',
						capacity: 3000,
						currentTemp: 20,
						targetTemp: 20,
						usageRate: 90,
						manager: '赵经理',
						phone: '13800138004',
						status: 'active',
						statusText: '运行中'
					}
				],
				inventoryData: [
					{
						warehouseName: '1号冷冻库',
						goodsType: '冷冻肉类',
						quantity: 500,
						unit: '箱',
						storageDate: '2024-01-05',
						expiryDate: '2024-07-05',
						status: '正常'
					},
					{
						warehouseName: '2号冷藏库',
						goodsType: '新鲜蔬菜',
						quantity: 200,
						unit: '筐',
						storageDate: '2024-01-08',
						expiryDate: '2024-01-15',
						status: '即将过期'
					},
					{
						warehouseName: '3号保鲜库',
						goodsType: '水果',
						quantity: 300,
						unit: '箱',
						storageDate: '2024-01-06',
						expiryDate: '2024-01-20',
						status: '正常'
					}
				],
				showWarehouseDialog: false,
				warehouseForm: {
					name: '',
					type: '',
					address: '',
					capacity: 0,
					targetTemp: 0,
					manager: '',
					phone: ''
				}
			},
			methods: {
				getStatusType(status) {
					const typeMap = {
						'active': 'success',
						'maintenance': 'warning',
						'offline': 'danger'
					};
					return typeMap[status] || 'info';
				},
				getTempClass(currentTemp, targetTemp) {
					const diff = Math.abs(currentTemp - targetTemp);
					if (diff <= 1) return 'temp-normal';
					if (diff <= 3) return 'temp-warning';
					return 'temp-danger';
				},
				getProgressColor(percentage) {
					if (percentage < 60) return '#67c23a';
					if (percentage < 80) return '#e6a23c';
					return '#f56c6c';
				},
				getInventoryStatusType(status) {
					const typeMap = {
						'正常': 'success',
						'即将过期': 'warning',
						'已过期': 'danger'
					};
					return typeMap[status] || 'info';
				},
				viewWarehouseDetail(warehouse) {
					this.$message.info('查看仓库详情：' + warehouse.name);
					console.log('仓库详情：', warehouse);
				},
				monitorTemperature(warehouse) {
					this.$message.success('开启温度监控：' + warehouse.name);
					console.log('温度监控：', warehouse);
				},
				manageInventory(warehouse) {
					this.$message.info('管理库存：' + warehouse.name);
					console.log('库存管理：', warehouse);
				},
				viewInventoryDetail(inventory) {
					this.$message.info('查看库存详情');
					console.log('库存详情：', inventory);
				},
				adjustInventory(inventory) {
					this.$message.info('调整库存数量');
					console.log('调整库存：', inventory);
				},
				saveWarehouse() {
					if (!this.warehouseForm.name || !this.warehouseForm.type) {
						this.$message.warning('请填写完整的仓库信息');
						return;
					}
					
					this.$message.success('仓库添加成功');
					console.log('新增仓库：', this.warehouseForm);
					
					// 重置表单
					this.warehouseForm = {
						name: '',
						type: '',
						address: '',
						capacity: 0,
						targetTemp: 0,
						manager: '',
						phone: ''
					};
					this.showWarehouseDialog = false;
				}
			}
		});
	</script>
</body>
</html>